Robust ressurslasting i React: Mestring av Error Boundaries med Hooks

I moderne webapplikasjoner er asynkron lasting av ressurser vanlig praksis. Enten det er henting av data fra et API, lasting av bilder eller import av moduler, er håndtering av potensielle feil under ressurslasting avgjørende for en god brukeropplevelse. React Error Boundaries gir en mekanisme for å fange JavaScript-feil hvor som helst i deres barn-komponenttre, logge disse feilene og vise et reserve-UI (fallback UI) i stedet for å krasje hele applikasjonen. Denne artikkelen utforsker hvordan man effektivt kan bruke Error Boundaries i kombinasjon med React Hooks for å håndtere ressurslastingsfeil.

Forståelse av Error Boundaries

Før React 16 kunne uhåndterte JavaScript-feil under komponent-rendering ødelegge Reacts interne tilstand og forårsake kryptiske feil ved senere renderinger. Error Boundaries løser dette ved å fungere som en «catch-all»-blokk for feil som oppstår i deres barnekomponenter. De er React-komponenter som implementerer en eller begge av følgende livssyklusmetoder:

• static getDerivedStateFromError(error): Denne statiske metoden påkalles etter at en feil er kastet av en etterfølgende komponent. Den mottar feilen som ble kastet som et argument og returnerer en verdi for å oppdatere komponentens tilstand.
• componentDidCatch(error, info): Denne livssyklusmetoden påkalles etter at en feil er kastet av en etterfølgende komponent. Den mottar feilen som ble kastet som et argument, samt et objekt som inneholder informasjon om hvilken komponent som kastet feilen. Du kan bruke den til å logge feilinformasjon.

Viktigst er at Error Boundaries kun fanger feil i renderingsfasen, i livssyklusmetoder og i konstruktører for hele treet under dem. De fanger ikke feil for:

• Hendelseshåndterere (lær mer i avsnittet nedenfor)
• Asynkron kode (f.eks. setTimeout eller requestAnimationFrame callbacks)
• Server-side rendering
• Feil som kastes i selve Error Boundary-komponenten (i stedet for i barna)

Error Boundaries og React Hooks: En kraftig kombinasjon

Mens klassekomponenter tradisjonelt ble brukt til å implementere Error Boundaries, tilbyr React Hooks en mer konsis og funksjonell tilnærming. Vi kan lage en gjenbrukbar useErrorBoundary-hook som innkapsler feilhåndteringslogikken og gir en praktisk måte å pakke inn komponenter som kan kaste feil under ressurslasting.

Opprette en tilpasset useErrorBoundary-hook

Her er et eksempel på en useErrorBoundary-hook:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Forklaring:

• useState: Vi bruker useState til å håndtere feiltilstanden. Den setter i utgangspunktet feilen til null.
• useCallback: Vi bruker useCallback til å memoize funksjonene resetError og captureError. Dette er god praksis for å forhindre unødvendige re-rendringer hvis disse funksjonene sendes ned som props.
• ErrorBoundary-komponent: Dette er en funksjonell komponent laget med useCallback som tar imot children og en valgfri fallback-prop. Hvis det finnes en feil i tilstanden, rendrer den enten den angitte fallback-komponenten eller en standard feilmelding. Ellers rendrer den barna. Dette fungerer som vår Error Boundary. Avhengighetsarrayet `[error]` sikrer at den re-rendres når error-tilstanden endres.
• captureError-funksjon: Denne funksjonen brukes til å sette feiltilstanden. Du vil kalle denne inne i en try...catch-blokk når du laster ressurser.
• resetError-funksjon: Denne funksjonen tømmer feiltilstanden, slik at komponenten kan re-rendre barna sine (og potensielt forsøke ressurslastingen på nytt).

Implementere ressurslasting med feilhåndtering

La oss nå se hvordan vi bruker denne hooken til å håndtere ressurslastingsfeil. Tenk deg en komponent som henter brukerdata fra et API:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry